<template>
<el-form ref="form" :model="form" label-width="100px">
  <el-form-item label="关键词" prop="key">
     <!--prop 一定要写，重置才有效  -->
    <el-input v-model="form.key"></el-input>
  </el-form-item>
  <el-form-item label="城市" prop="region">
    <el-select v-model="form.region" placeholder="垃圾分类所在城市">
      <el-option
        v-for="(item, index) in city_options"
        :key="index"
        :label="item"
        :value="item"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="使用代理" prop="use_proxy">
    <el-switch v-model="form.use_proxy"></el-switch>
  </el-form-item>
  <el-form-item label="更新代理IP" v-show="isShow" prop="f_update">
    <el-switch v-model="form.f_update"></el-switch>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
  <hr>
  <el-form-item label="结果" v-show="showAnswer">
    <div style="font-size: 16px">{{ form.key }}是{{ rubbish }}</div>
  </el-form-item>

<el-row><span style="font-size: 20px;padding-left: 10px">日常生活垃圾分为</span></el-row>
  <br/>
  <el-row class="row-bg" justify="center">
    <el-col :span="12">
      <el-row>
        <el-col :span="4">
            <el-image
            style="width: 130px; height: 130px"
            src="https://lajifenleiapp.com/static/svg/1_3F6BA8.svg"
            fit="contain">
            </el-image>
        </el-col>
        <el-col :span="18">
          <h3>可回收物</h3>
          <p>是指在日常生活中或者为日常生活提供服务的活动中产生的，已经失去原有全部或者部分使用价值，回收后经过再加工可以成为生产原料或者经过整理可以再利用的物品，包括废纸类、塑料类、玻璃类、金属类、织物类等。</p>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="12">
      <el-row>
        <el-col :span="4">
            <el-image
            style="width: 130px; height: 130px"
            src="https://lajifenleiapp.com/static/svg/3v_8F6F55.svg"
            fit="contain">
            </el-image>
        </el-col>
        <el-col :span="18">
          <h3>湿垃圾</h3>
          <p>即易腐垃圾，指食材废料、剩菜剩饭、过期食品、瓜皮果核、花卉绿植、中药药渣等易腐的生物质生活废弃物。</p>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <el-row class="row-bg" justify="center">
    <el-col :span="12">
      <el-row>
        <el-col :span="4">
            <el-image
            style="width: 130px; height: 130px"
            src="https://lajifenleiapp.com/static/svg/2v_B43953.svg"
            fit="contain">
            </el-image>
        </el-col>
        <el-col :span="18">
          <h3>有害垃圾</h3>
          <p>指废电池、废灯管、废药品、废油漆及其容器等对人体健康或者自然环境造成直接或者潜在危害的生活废弃物。</p>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="12">
      <el-row>
        <el-col :span="4">
            <el-image
            style="width: 130px; height: 130px"
            src="https://lajifenleiapp.com/static/svg/4_2F3D39.svg"
            fit="contain">
            </el-image>
        </el-col>
        <el-col :span="18">
          <h3>干垃圾</h3>
          <p>即其它垃圾，指除可回收物、有害垃圾、湿垃圾以外的其它生活废弃物。</p>
        </el-col>
      </el-row>
    </el-col>
  </el-row>

</el-form>

</template>
<script>

export default {
  data () {
    return {
      form: {
        key: '',
        f_update: false,
        use_proxy: false,
        region: ''
      },
      rubbish: "",
      city_options:["广州","北京","天津","上海","重庆","石家庄","邯郸","太原","呼和浩特","沈阳","大连","长春","哈尔滨","南京","苏州","杭州","宁波","合肥","铜陵","福州","厦门","南昌","宜春","郑州","济南","泰安","青岛","武汉","长沙","宜昌","深圳","南宁","海口","成都","广元","德阳","贵阳","昆明","拉萨","日喀则","西安","咸阳","兰州","西宁","银川","乌鲁木齐"]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
      var vm = this
      this.$http
        .get("http://server.foshanplus.com/rubbish", {
          params: vm.form
        }).then(function (response) {
          console.log(response.data.data)
          vm.rubbish = response.data.data
          vm.$message({
              message: "请求成功",
              type: 'success'
          })
        }).catch(function (error) {
          vm.$message.error("请求错误")
        })
    },
    resetForm (formName) {
      this.$refs['form'].resetFields()
      this.rubbish = ""
    }
  },
  computed:{
    isShow: function () {
	  		return this.form.use_proxy
      },
    showAnswer: function () {
      if (this.rubbish == '') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>